import React, { Component } from 'react'
import "../style/home.css"
import axios from "axios"
import { Toast } from 'react-vant';
class Home extends Component {
    // constructor(props){
    //     super(props)
    //     this.state = {

    //     }
    // }
    state = {
        arr:[], // 请求数据放的数组
        checkAll:false, // 全选反选的
        sum:0 // 求和得变量
    }
    componentDidMount () {
        axios.get("/list").then(res=>{
            this.setState({
                arr:res.data.list
            },()=>{
                console.log(this.state.arr)
            })
        })
     
    }
    // 全选得函数
    checkAll(){
        this.setState({
            checkAll:!this.state.checkAll
        },()=>{
            console.log(this.state.checkAll)
        })
        setTimeout(()=>{
           let crr = this.state.arr.map((item,index)=>{
                item.flag = this.state.checkAll
                return item
            })
            console.log(crr)
            this.setState({
                arr:crr
            })
            this.sumfn()
        },200)
        
    }
    // 购物车数量减少的
    del(ind){
        console.log(ind)
        this.state.arr.forEach((item,index)=>{
            if (index == ind) {
                item.num --;
                if (item.num < 0 ) {
                    item.num = 0 
                    Toast.info('不能在减了')
                }
            }
        })
        this.setState({
            arr:this.state.arr
        })
        this. sumfn()
    }
    addFn(ind) {
        console.log(ind)
        this.state.arr.forEach((item,index)=>{
            if (index == ind) {
                item.num++
            }
        })
        this.setState({
            arr:this.state.arr
        })
        this.sumfn()
    }

    // 每一个得选中事件
    checkitem(ind){
        console.log(ind)
        this.state.arr.forEach((item,index)=>{
            if (index == ind) {
                item.flag = !item.flag
            }
        })
        let fanxuan = this.state.arr.every((item,index)=>{
            return item.flag
        })
        this.setState({
            arr:this.state.arr,
            checkAll:fanxuan
        })
       this. sumfn()
    }
    // 求和方法 
    sumfn(){
       let zongshu =  this.state.arr.reduce((a,b)=>{
            if (b.flag) {
                return a + b.price * b.num
            }
            else {
                return a
            }
        },0)
        this.setState({
            sum:zongshu
        })
    }
    render() {
        let {arr} = this.state
        return (
            <div className="home-wrap">
               {
                   arr&&arr.length?arr.map((item,index)=>{
                       return (
                           <div key={index} className="shopList-wrap">
                               <div>
                                   {/* 在react里写图片必须加alt */}
                                   <img src={item.img} alt="" />
                               </div>
                               <div style={{paddingLeft:'30px'}}>
                                   <p>
                                        <input type="checkbox" checked={item.flag} onChange={this.checkitem.bind(this,index)}/>
                                       
                                   </p>
                                    <p>{item.flag?"true":"false"}</p>
                                    <p>{item.title}</p>
                                    <p> <button style={{width:'40px'}} onClick={this.del.bind(this,index)}>-</button> 个数：{item.num} <button style={{width:'40px'}} onClick={this.addFn.bind(this,index)}>+</button></p>
                                    <p>价格：{item.price}</p>
                                </div>
                           </div>
                          
                       )
                   }):"暂无数据"
               }
               <div className="footer">
                   <div>
                       <span>全选</span>
                       <input type="checkbox" checked={this.state.checkAll} onChange={this.checkAll.bind(this)}/>
                       <span style={{marginLeft:"30px"}}>总价：{this.state.sum}</span>
                   </div>
               </div>
            </div>
        )
    }
}

export default Home
